import './header.less'
import NowDAte from './date'
import { Menu, Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons';
import { useHistory } from "react-router-dom"
function Header (props) {
  let history = useHistory();
  function goEquipment() {
    history.push('/equipment')
  }

  return <ul className='header'>
    { props.them === null ? <li>
      <p className='ft-30'>TGOOD</p>
      <p className='ft-24'>川开电气</p>
    </li> : ''}
    { props.them === null ? <li className='title'>
      <p className='ft-34'>川开电气有限公司智能配电柜监测系统</p>
      <p className='ft-18'>IMT INTELIGENT DISTRIBUTOR MONITORING SYSTEM</p>
    </li> : <li className='blue-bg'></li> }
    <li className='space'></li>
    <NowDAte />
    <span className='equipment' onClick={goEquipment}>设备管理</span>
    <li className='swich-them'>
      <Dropdown overlay={
        <Menu>
          <Menu.Item onClick={() => props.setThem(null)}>
            <span>绿色</span>
          </Menu.Item>
          <Menu.Item onClick={() => props.setThem('blue')}>
            <span>蓝色</span>
          </Menu.Item>
        </Menu>
      }>
        <span className='them-btn'>切换主题 <DownOutlined /></span>
      </Dropdown>
    </li>
  </ul>
}
export default Header